<template>
    <div class="Sale-container">
        <el-row>
            <el-col :span="18" class="Sale-container-h">
                <img :src="Saledata.picture.ms">
                <span class="Sale-container-h1">{{ Saledata.Salemsg[0] }}</span>
                <div class="Sale-container-h2">
                    <ul>
                        <li class="hour"></li>
                        <li class="times">{{Saledata.Salemsg[1]}}</li>
                        <li class="minute"></li>
                        <li class="times">{{Saledata.Salemsg[2]}}</li>
                        <li class="second"></li>
                    </ul>
                </div>
            </el-col>
            <el-col :span="6" class="Sale-container-span">
                <span>{{Saledata.Salemsg[3]}}</span>
            </el-col>
        </el-row>
        <el-row class="Sale-container-list">
            <el-col :span="6" v-for="item in Saledata.Sale" :key="item.id">
                <img :src="item.src">
                <p>{{item.currentprice}}</p>
                <span>{{item.originalcost}}</span>
            </el-col>
        </el-row>
        <div class="lovelive">
			<img :src="Saledata.picture.img40">
		</div>
    </div>
</template>

<script>
import { Sales } from "@/api/index"
export default {
    name: 'Sale',

    data() {
        return {
            Saledata:[],
        };
    },

    mounted() {
        // 计时器
				function fun() {
					var hour1 = document.querySelector(".hour");
					var minute1 = document.querySelector(".minute");
					var second1 = document.querySelector(".second");
					var time1 = new Date();
					var time2 = new Date('1/1/2030 00:00:00');
					var time = time2.getTime() - time1.getTime();
					var hour = parseInt(time / 1000 / 60 / 60 % 24);
					hour1.innerHTML = hour;
					var minute = parseInt(time / 1000 / 60 % 60);
					minute1.innerHTML = minute;
					var second = parseInt(time / 1000 % 60);
					second1.innerHTML = second;
				}
				window.onload = function() {
				    setInterval(fun, 1000);
				}
        //从后台获取数据
        let S = async () => {
            let SALE = await Sales()
            // console.log(SALE.data.Sale.Sale);
            this.Saledata = SALE.data.Sale
        }
        S();
    },
};
</script>

<style scoped>
.Sale-container {
	width: 400px;
	height: 190px;
    margin: 0 auto;
}

.Sale-container-h {
	height: 30px;
	line-height: 30px;
	display: flex;
}

.Sale-container-h1 {
	color: red;
	margin-left: 5px;
	margin-right: 5px;
}
/* 计时器 */
.Sale-container-h2 {
	width: 100px;
    transform: translateY(-16px) translateX(-35px);
}
.Sale-container-h2>ul{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
    margin-left: 45px;
}
.Sale-container-h2>ul>li{
    list-style: none;
}


.Sale-container-span {
	color: red;
	font-size: 0.8em;
	height: 30px;
	line-height: 30px;
}

.Sale-container-h img {
	width: 24px;
	height: 24px;
	margin-top: 3px;
}

.Sale-container-list {
	margin-top: 10px;
}
.Sale-container-list>div{
	cursor: pointer;
}
.Sale-container-list p {
	color: red;
	font-weight: bold;
	margin-bottom: 3px;
	font-size: 0.8em;
}

.Sale-container-list span {
	font-size: 0.8em;
	text-decoration: line-through;
}
.el-row{
    text-align: center;
}
.lovelive{
    width: 400px;
    height: 50px;
}
.lovelive img{
    width: 100%;
    height: 100%;
}
</style>